<template>
    <div class="product-center">
        <div class="page-center pt-40">
            <h1>新品放送</h1>
            <h2>New Arrivals</h2>
            <div class="mt-20 mb-20 text-center">
                <el-button plain @click="router.push({ name: 'project' })">点击查看项目列表</el-button>
            </div>
            <p class="intent">
                为客户创造最大价值，是我们的理念。坚守产品质量，每个化合物都尽可能全面验证，所有产品提供COA, HPLC,
                MS和H-NMR等满足注册申报要求，部分产品提供qNMR,
                NMR解析以及产品合成路线等服务；产品规格灵活，按需分装；产品现货库存丰富，部分项目杂质全面，下列近6000个杂质对照品，均可24小时内出库，是您效率的保障；售后响应高效，深入，专业。通过最优的成本，质量和效率的组合，为您创造最大的价值。
            </p>
            <common-product></common-product>
            <div class="product-button-wrap mb-40">
                <div class="product-button">
                    <a href="/products">更多产品 ></a>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import router from '@/router/index'
import CommonProduct from '@/components/CommonProduct.vue'
</script>
<style lang="scss" scoped>
.product-center {
    height: 1267px;
    background-color: rgb(255, 255, 255);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('~@/assets/imgs/bg2.jpg');

    h1 {
        text-align: center;
        color: #09a4c3;
        font-size: 28px;
    }

    h2 {
        text-align: center;
        color: #999;
        font-size: 14px;
    }

    .product-button-wrap {
        width: 150px;
        margin: 40px auto;
    }
    .product-button {
        width: 150px;
        height: 44px;
        line-height: 42px;
        text-align: center;
        border: 1px solid #fff;
        a {
            color: #fff;
        }
        &:hover {
            background-color: rgba(9, 164, 195, 1);
            border-color: transparent;
            a {
                font-weight: bold;
                color: #fff;
            }
        }
    }
}
</style>
